<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<view v-if="isLogin" class="body">	
			
			<view class="step-bar">
				<view class="fix-wrap">
					<view class="item active">
						<view class="icon iconfont">&#xe8cc;</view>
						<text class="text">基本信息</text>
					</view>
					<view class="item active">
						<view class="icon iconfont f-s38">&#xe621;</view>
						<text class="text">合同</text>
					</view>
					<view class="item active">
						<view class="icon iconfont">&#xec35;</view>
						<text class="text">阶段任务</text>
					</view>
					<view class="item">
						<view class="icon iconfont">&#xe659;</view>
						<text class="text">回款计划</text>
					</view>
					<view class="item">
						<view class="icon iconfont">&#xeb67;</view>
						<text class="text">发送审批</text>
					</view>
				</view>	
			</view>
			
			<view class="hd-title">
				<view class="title">阶段任务</view> 
			</view>
			<view class="project-form-wrap m-b2" v-for="(item,index) in taskData.list" :key="index">				
				<view class="form-wrap">
					<view class="step-name">
						<view class="name">阶段-{{index+1}}</view>
						<view v-if="index>0" class="del" @click="delCreatedPlan(index)">删除</view>
					</view>
					<view class="form-textarea-item">
						<view class="label a-t">任务描述</view>
						<view class="form-textarea">
							<textarea class="inp-textarea" v-model="item.task_name" placeholder="任务描述" maxlength="-1"></textarea>
						</view>
					</view>  
					<view class="form-item">
						<view class="label">优先级：</view>
						<picker class="form-picker" mode="selector" :range="levelList" range-key="name" @change="changeLevel($event,index)">
							<view class="picker">
								<view class="select-data t-r">{{item.priority_name}}</view>
								<view class="icon">
									<view class="iconfont f-s34">&#xe8d4;</view>
								</view>						
							</view>	
						</picker> 						
					</view>   
					
					<view class="form-item">
						<view class="label">开始时间：</view>
						<picker class="form-picker" mode="date" @change="changeDate(index,1,$event)">
							<view class="picker">
								<view class="select-data t-r">
									<text v-if="item.start_time">{{item.start_time}}</text>
									<text v-else class="f-grey">选择开始时间</text>
								</view>
								<view class="icon">
									<view class="iconfont f-s34">&#xe8d4;</view>
								</view>						
							</view>	
						</picker> 						
					</view> 
					
					<view class="form-item">
						<view class="label">结束时间：</view>
						<picker class="form-picker" mode="date" @change="changeDate(index,2,$event)">
							<view class="picker">
								<view class="select-data t-r">
									<text v-if="item.end_time">{{item.end_time}}</text>
									<text v-else class="f-grey">选择结束时间</text>
								</view>
								<view class="icon">
									<view class="iconfont f-s34">&#xe8d4;</view>
								</view>						
							</view>	
						</picker> 						
					</view> 
					
					<view class="form-textarea-item">
						<view class="label a-t">任务进展描述</view>
						<view class="form-textarea">
							<textarea class="inp-textarea" v-model="item.desc"  placeholder="任务进展描述(选填)" maxlength="-1"></textarea>
						</view>
					</view> 
				</view> 
			</view>
			
			  
		</view> 
		<view class="footer">
			<view class="fix-wrap created-btn-wrap">
				<view class="btn submit-btn" @click="addTask">下一步</view>
				<navigator :url="'/package_project/created_step-4/created_step-4?id='+id" hover-class="none" class="btn next-btn">跳过</navigator>
			</view>
		</view>
		<view class="add-btn" @click="createdTask"><view class="text">添加</view></view>
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				isIphoneX:getApp().globalData.isIphoneX,
				isLogin:false,
				id:'',
				levelList:[],			 
				taskData: {
					num: 0, 
					list: [{  
						project_id: '',
						task_name: '',
						priority: '',  
						priority_name:'',
						start_time:'',
						end_time:'',
						desc: '未开始',
						isError:true
					}]
				}, 
				isStop:true
			}
		},
		onLoad(params) {	
			this.isLogin=this.$loginState('check');
			this.id=params.id;
			
			// 项目类型
			this.levelList=this.$mock_data.level; 
			this.taskData.list[0].project_id=this.id;
			this.taskData.list[0].priority=this.levelList[0].id; 
			this.taskData.list[0].priority_name=this.levelList[0].name; 
		},
		methods: {
			
			// 添加任务阶段
			createdTask() {
				this.taskData.num += 1; 
				this.$set(this.taskData.list, this.taskData.num, {   
					project_id: this.id,
					task_name: '',
					priority: this.levelList[0].id, 
					priority_name:this.levelList[0].name,
					desc: '未开始',
					start_time:'',
					end_time:'',
					isError:true
				}) 
			},
			
			// 删除任务阶段
			delCreatedTask(idx) {
				this.taskData.num -= 1;
				this.taskData.list.splice(idx, 1);
			},
			
			// 切换任务等级
			changeLevel(e,idx){ 
				this.taskData.list[idx].priority=this.levelList[e.target.value].id;
				this.taskData.list[idx].priority_name=this.levelList[e.target.value].name;  
			},			 
			
			// 选择日期
			changeDate(idx,type,e){ 
				if(type==1){
					this.taskData.list[idx].start_time=e.target.value; 					 
				}else if(type==2){
					this.taskData.list[idx].end_time=e.target.value; 
				} 
			},
			
			// 上传任务
			async addTask(){				
				for(let i in this.taskData.list){
					if(this.taskData.list[i].task_name=='' || this.taskData.list[i].desc=='' || this.taskData.list[i].start_time== ''||this.taskData.list[i].end_time== '') {
						this.$showToast({ 
							title:'请填写完整信息在提交',
							duration:1000,
						})  						 
						this.taskData.list[i].isError=false;
						return
					}else{
						this.taskData.list[i].isError=true;
					}
				} 
				if(this.isStop){
					this.isStop=false;
					let res=await this.$api.user_api.addTaskall({
						addata:JSON.stringify(this.taskData.list)
					}); 
					if(res.data.code==200){
						this.$showToast({
							icon:'success',
							title:'上传成功',
							duration:1000,
						}).then(()=>{
							setTimeout(()=>{
								uni.redirectTo({
									url: '/package_project/created_step-4/created_step-4?id=' + this.id
								}) 
							},1000)
						})
						
						this.isStop=true;
					}else{
						this.isStop=true;
						this.$showToast({
							icon:'error',
							title:res.data.msg,
							duration:1000,
						})  	 
					} 
				}
				
				
			}
			
			
		}
	}
</script>

<style lang="less" scoped>
	.upload-area{
		padding: 20rpx;
		background: #fff;
		.icon{
			margin-bottom: 40rpx;
			text-align: center;
			font-size: 160rpx;
			color:#0099ff;
		}
		.btn{
			width: 50%;
			height: 70rpx;
			line-height: 70rpx;
			margin: 0 auto;
			background: #09f;
			border-radius: 8rpx;
			color:#fff;
			font-size: 30rpx;
			text-align: center;
			
		}
	}
	.hd-title{
		display: flex;
		justify-content: space-between;
		margin:0 20rpx 20rpx;		
		.title{
			padding-left:20rpx;
			border-left: 8rpx solid #0099ff;
			font-size: 30rpx;
			font-weight: bold;
		}
		
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right:20rpx;
		bottom:180rpx;
		width: 100rpx;
		height:100rpx;
		text-align: center; 
		background: #09f;
		box-shadow: 0 0 10rpx #09f;
		border-radius: 50%;
		color:#fff;
		font-size: 28rpx;
		.text{
			width: 70rpx;
		}
	}
	.step-name{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.name{
			padding:20rpx;
			font-size: 30rpx;
			font-weight: bold;
		}
		.del{
			margin-right: 20rpx;
			color:#09f;
			font-size: 28rpx;
		}
		
	}
	.created-btn-wrap{
		display: flex;
		.btn{
			height: 80rpx;
			line-height: 80rpx;
			margin: 10rpx 10rpx 0;
			flex-grow: 1;
			border-radius: 8rpx;
			text-align: center;
			font-size: 30rpx;
			color:#fff;
		}
		.next-btn{
			background: #ff9600; 
		}
		.submit-btn{
			background: #0099ff; 
		}
	} 
	.step-bar{
		height: 90rpx;
		margin-bottom: 20rpx;
		.fix-wrap{
			display: flex;
			height: 90rpx;
			background: #fff;
		}
		.item{
			flex-grow: 1;
			width: 25%;
			text-align: center;
			color:#999;
			.text{
				font-size: 28rpx;				
			}
			.icon{
				width: 40rpx;
				height: 40rpx;
				margin:0 auto 0; 
			}
		}
		.active{
			.text,.icon{
				color:#09f;				
			} 
		}
	}
</style>
